<template>
    <div>
        <Row :gutter="5" type="flex" justify="center" align="bottom">
            <i-col span="2" >
                <Button  size="default"  type="primary"  @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="3" offset="1" >
                <Button  size="default"  type="primary" @click="btn_stop_timer">停止定时器</Button>
            </i-col>
            <i-col span="18">
                <i-col span="5" offset="1">
                    <span>{{ pod_name }} </span>
                </i-col>
                <i-col span="2" offset="1">
                    <span>选择容器: </span>
                </i-col>
                <i-col span="2" offset="1">   
                    <Select v-model="container"  @on-change="container_changer">
                        <template v-for="c in container_list" >
                            <Option  :key="c" :value="c" v-if="c==container"  selected>{{ c }}</Option>
                            <Option :key="c" :value="c" v-else>{{ c }} </Option>
                        </template>
                    </Select>
                </i-col>
                <i-col span="2" offset="1">
                    末尾: {{ logLength }}行
                </i-col>
            </i-col>
        </Row>

        <div style=" background: #002833;">
                <MyTerminal style="height: 80vh;overflow:auto"  :terminal="terminal" ref="xterm">
                </MyTerminal>
        </div>
    </div>
</template>

<script>

import { get_container_name ,get_pod_log} from '@/api'
import { k8s_cluster_post } from '@/api/http'

import MyTerminal from '@/lib/myTerminal';

export default {
    components:{
        MyTerminal
    },
    data() {
        return {
            data: "",
            // 容器列表
            container_list:[],
            container: '',
            pod_name: '',
            namespace: '',  
            logLength: 0,        
            terminal: {
                pid: 1,
                name: "terminal",
                cols: 40,
                rows: 100,
            },
        }
    },
    methods: {

        btn_stop_timer(){
            clearInterval(this.timer)
        },
        container_changer(){
            this.refresh()
        },
        get_params(){
            let query = this.$router.currentRoute.query
            let name = query.name

            let namespace = query.namespace
            console.log("namespace:",namespace,"name:",name)            
            this.pod_name =  name
            this.namespace = namespace

            let data = {"namespace":namespace,"name":name}
            k8s_cluster_post(get_container_name,data,undefined,undefined).then(response =>{
                let data = response.data
                console.log("获取容其名称:",data)
                this.container_list = data
                this.container = this.container_list[0]
            })
        },
        refresh(){
            let data = {
                "namespace":this.namespace,
                "name":this.pod_name,
                "container":this.container
            }
            k8s_cluster_post(get_pod_log,data,undefined,undefined).then(response=>{
                let data = response.data
                this.logLength = data.split("\n").length
                this.$refs.xterm.term.clear()
                this.$refs.xterm.term.writeln(data)
            }).catch(error=>{
                console.log(error)
            })     
        },
        btn_refresh() {
            this.refresh()
            
        },

    },

    mounted: function() {
        // terminal初始化
        this.get_params()

        setTimeout(() =>{
            this.refresh();
        },200); 
        this.timer = setInterval(this.refresh, 10000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },

}
</script>
<style>

</style>